<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单确认</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

</head>
<body>
<div th:replace="fragments/header:: navbar"></div>
<div class="container pt-5">
        <h3 class="text-center">请确认您的订单信息</h3>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>图书名称</th>
                    <th>图书数量</th>
                    <th>图书价格</th>
                </tr>
            </thead>
            <tbody>
                <tr th:if="${#lists.isEmpty(order.books)}">
                    <td colspan="5"class="text-xs-center">你的订单为空</td>
                </tr>

                <tr th:each="orderBook:${order.books}">
                    <td>[[${orderBook.book.bookName}]]</td>
                    <td>[[${orderBook.quantity}]] </td>
                    <td>[[${orderBook.book.bookPrice}]]元</td>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="2" class="text-end">合计：</td>
                <td th:unless="${#lists.isEmpty(order.books)}" class=
                        "text-xs-start">[[${order.orderPrice}]]元</td>
            </tr>
        </tfoot>
        </table>
    <h3 class="text-center">请确认您的配送信息</h3>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>用户全名</th>
                <th>联系方式</th>
                <th>配送地址</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>[[${user.userFullname}]]</td>
                <td>[[${user.userPhone}]] </td>
                <td>[[${user.userAddress}]]</td>
            </tr>
            </tbody>
        </table>
    <div class = "col-12 text-end">
        <button class="btn btn-info" onclick="history.back()">
            <span class="bi bi-arrow-90deg-left">&nbsp;返回</span>
        </button>
        <a class="btn btn-success" th:href="@{/confirmOrder}">订单结算</a>
    </div>
</div>
</body>
</html>